<template>
  <div class="container">
    <div class="content">
      <!--  -->
      <div class="flex borl bort" style="font-size: 10px">
        <div class="flex-1 tac borr borb">时间</div>
        <div class="w40 tac borr borb">
          <div>气囊</div>
          <div>压力</div>
          <div>cmH2O</div>
        </div>
        <div class="w60 tac borr borb">
          <div>气插</div>
          <div>方式</div>
        </div>
        <div class="w40 tac borr borb">
          <div>气插</div>
          <div>深度</div>
          <div>cm</div>
        </div>
        <div class="w40 tac borr borb">
          <div>呼吸</div>
          <div>模式</div>
        </div>
        <div style="width: 600px">
          <div class="borb borr tac" style="height: 20px">参数设置</div>
          <div class="flex" style="height: 40px">
            <div class="w40 tac borr borb">
              <div>f</div>
              <div>次/分</div>
            </div>
            <div class="w40 tac borr borb">
              <div>Pinsp</div>
              <div>cmH2O</div>
            </div>
            <div class="w40 tac borr borb">
              <div>Tinsp</div>
              <div>(s)</div>
            </div>
            <div class="w40 tac borr borb">
              <div>O2</div>
              <div>%</div>
            </div>
            <div class="w40 tac borr borb">
              <div>PEEP</div>
              <div>(cmH2O)</div>
            </div>
            <div class="w40 tac borr borb">
              <div>VT</div>
              <div>(ml)</div>
            </div>
            <div class="w40 tac borr borb">
              <div>Flow</div>
              <div>(L/min)</div>
            </div>
            <div class="w40 tac borr borb">
              <div>PS</div>
              <div>(cmH2O)</div>
            </div>
            <div class="w40 tac borr borb">
              <div>TL</div>
              <div>S</div>
            </div>
            <div class="w40 tac borr borb">
              <div>TPL</div>
              <div>S</div>
            </div>
            <div class="w40 tac borr borb">
              <div>PEEPH</div>
              <div>cmH2O</div>
            </div>
            <div class="w40 tac borr borb">
              <div>TH</div>
              <div>S</div>
            </div>
            <div class="w40 tac borr borb">
              <div>PEEPL</div>
              <div>cmH2O</div>
            </div>
            <div class="w40 tac borr borb">
              <div>IPAP</div>
              <div>cmH2O</div>
            </div>
            <div class="w40 tac borr borb">
              <div>EPAP</div>
              <div>cmH2O</div>
            </div>
          </div>
        </div>
        <div style="width: 200px">
          <div class="borb tac borr" style="height: 20px">动态参数</div>
          <div class="flex" style="height: 40px">
            <div class="w40 tac borr borb">
              <div>Ppeak</div>
              <div>cmH2O</div>
            </div>
            <div class="w40 tac borr borb">
              <div>MV</div>
              <div>L/min</div>
            </div>
            <div class="w40 tac borr borb">
              <div>f</div>
              <div>次/分</div>
            </div>
            <div class="w40 tac borr borb">
              <div>VTI</div>
              <div>ml</div>
            </div>
            <div class="w40 tac borr borb">
              <div>VTE</div>
              <div>ml</div>
            </div>
          </div>
        </div>
        <div class="flex-1 tac borr borb">签名</div>
      </div>
      <!--  -->
      <div v-for="items in tableConf" :key="items.nanoid" class="flex borl">
        <div class="flex-1 h30 tac borr borb">
          <DateSelection
            v-model="items.mappedTime"
            class="txt-c"
            style="
              display: flex;
              flex-direction: column;
              width: 100%;
              height: 22px;
              font-size: 10px;
              padding: 0;
              justify-content: center;
            "
            value-format="yyyy-MM-dd HH:mm"
            disabled
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :has-border="false"
            :display-num="!items.mappedTime"
            :need-time-icon="false"
            :noClear="false"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.emti_qny"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w60 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.hx_type"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.qgcg_depth"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_mode"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_f"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_pinsp"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_tinsp"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_o2"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_peep"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_vt"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_flow"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_ps"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_tls"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_tpls"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_peeph"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_ths"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_peepl"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_ipap"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.config_epap"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.ppeak"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.mve"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.fspont"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.vti"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="w40 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.vte"
            class="inputStyle"
            @change="inputChange(items)"
          />
        </div>
        <div class="flex-1 h30 tac borr borb">
          <input
            v-if="items.mappedTime"
            v-model="items.sign"
            class="inputStyle"
          />
        </div>
      </div>
      <!--  -->
    </div>
  </div>
</template>
<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV1.vue'
import { formatTime } from '@/utils/format'
import { getStoreFromInstance } from '@/utils/instance'

export default defineComponent({
  components: { DateSelection },
  props: {
    data: {
      type: [Object, Array],
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      tableConf: []
    })
    const store = getStoreFromInstance()

    const user = computed(() => store.getters.user)

    function initData() {
      state.tableConf = props.data
    }

    function getParams() {
      const arr = state.tableConf.filter(res => res.mappedTime)
      return arr
    }

    function inputChange(items) {
      items.sign = user.value.name
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      inputChange,
      getParams
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  // margin: getpx(30) auto 0;
  // width: calc(100% - 40px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  .content {
    font-size: 12px;
    margin-top: 0;
  }
}

.inputStyle {
  // font-size: 10px;
  border: none;
  background-color: rgba($color: #000, $alpha: 0%);
  outline: none;
  width: 90%;
  height: 100%;
}

.w40 {
  width: 40px;
}

.w60 {
  width: 60px;
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}

.pad5 {
  padding: 5px;
}

.h30 {
  height: 38px;
}
</style>
